<template>
	<view class="orderdetail_page">
		<view class="order_type_box" v-if="list.state==1||list.state==2||list.state==3">
			<view class="order_type">{{list.state_text}}</view>
			<!-- <view class="pay_tip">30:00 后订单自动关闭，请及时付款哦~</view> -->
		</view>
		<view class="card" v-if="list.state==4||list.state==3">
			<view class="card_text">师傅报价</view>
			<view style="display: flex;"><span style="color: #00CC7B;">{{list.offlog_num}}</span>位师傅已报价
			<u-icon name="arrow-right" size="20" @click="toMaster(list.id)"></u-icon></view>
		</view>
		
		<view class="card" v-if="list.state==5">
			<view class="card_text">师傅正在赶来~</view>
			<u-icon name="phone" size="28" color="#00CC7B"></u-icon>
		</view>
		<view class="card" v-if="list.state==6" @click="toOverImg(list.id)">
			<view class="card_text" >查看竣工图片</view>
			<u-icon name="arrow-right" size="20"></u-icon>
		</view>
		<view class="order_info_box">
			<view class="info_type">{{list.order_type==1?'一口价':list.order_type==2?'报价':list.order_type==3?'悬赏订单':'房屋装饰'}}</view>
			<view class="custom_info">
				<view>联系人信息</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<view class="info_item">
				<view>联系人</view>
				<view class="info_text">{{list.name}}</view>
			</view>
			<view class="info_item">
				<view>手机号</view>
				<view class="info_text">{{list.mobile}}</view>
				<view class="copy" @click="copyPhone(list.mobile)">复制</view>
			</view>
			<view class="info_item">
				<view>联系地址</view>
				<view class="info_text">{{list.province + list.city + list.area + list.address}}</view>
			</view>
		</view>
		<view class="order_box">
			<view style="font-size: 28rpx;font-weight: bold;">商品信息</view>
			<view class="content">
				<image :src="list.category.image"></image>
				<view class="right">
					<view class="goods_name">
						<view>{{list.category_name}}</view>
						<view>x1</view>
					</view>
					<view class="tips">{{list.serve_type==1?'安装':'维修'}}</view>
					<view class="tips">{{list.fittings_status==1?'未到货':'已到货'}}</view>
				</view>
			</view>
			<view class="total_money">总金额：<span style="color: #FA5A28;font-size: 28rpx;font-weight: bold;">￥{{list.order_price}}</span>
			</view>
		</view>
		<view class="order_no_box">
			<view class="no_text">订单信息</view>
			<view class="info_item">
				<view>订单编号</view>
				<view class="info_text">{{list.order_no}}</view>
				<view class="copy" @click="copyOrder(list.order_no)">复制</view>
			</view>
			<view class="info_item">
				<view>下单时间</view>
				<view class="info_text">{{list.createtime_text}}</view>
			</view>
			<view class="kefu_box">
				<image src="../../static/order/kefu.png"></image>
				<view @click="openKeFu()">联系客服</view>
			</view>
		</view>
		<view class="btns" v-if="list.state==1">
			<view class="btn" @click="cancel(list.id)">取消订单</view>
			<view class="btn">重新发布</view>
			<view class="pay_btn">立即付款</view>
		</view>
		<view class="btns" v-if="list.state==2">
			<view class="btn" @click="cancel(list.id)">取消订单</view>
			<view class="btn">重新发布</view>
			<view v-if="list.order_type==3" class="pay_btn" @click="add_show=!add_show">继续加价</view>
		</view>
		<view class="btns" v-if="list.state==3">
			<view class="btn" @click="cancel(list.id)">取消订单</view>
			<view class="btn">重新发布</view>
			<view class="pay_btn">确认下单</view>
		</view>
		<view class="btns" v-if="list.state==4">
			<view class="btn">重新发布</view>
		</view>
		<view class="btns" v-if="list.state==5">
			<view class="btn">再次下单</view>
			<view class="pay_btn">联系师傅</view>
		</view>
		<view class="btns" v-if="list.state==6">
			<view class="btn">再次下单</view>
			<view class="pay_btn" @click="toOverImg(list.id)">确认验收</view>
		</view>
		<view class="btns" v-if="list.state==7">
			<view class="btn">再次下单</view>
			<view class="pay_btn" @click="toAssess(list.id)">去评价</view>
		</view>
		<view class="btns" v-if="list.state==8">
			<view class="btn">再次下单</view>
			<view class="btn">删除订单</view>
		</view>
		<u-popup :show="add_show" mode="bottom" :round="20" closeOnClickOverlay @close="add_show=!add_show">
			<view class="pop_box">
				<view>继续加价</view>
				<input class="pop_ipt" v-model="add_price" placeholder="请输入您的加价金额" />
				<view class="pop_btn" @click="pay_show=true">确定</view>
			</view>
		</u-popup>
		<u-popup :show="pay_show" mode="bottom" :round="20" closeOnClickOverlay @close="pay_show=!pay_show" >
			<view class="pay_pop">
				<view>付款</view>
				<view class="pay_num">{{add_price}}</view>
				<view class="pay_item">
					<view style="display: flex;width: 60%;">
						<image class="pay_icon" src="../../static/wallet/ali.png"></image>
						<view class="text_pay">支付宝支付</view>
					</view>
					<image v-if="pay_type==1" class="sel_pay" src="../../static/wallet/yes.png"></image>
					<view class="pay_null" v-else @click="pay_type=1"></view>
					
				</view>
				<view class="pay_item">
					<view style="display: flex;width: 60%;">
						<image class="pay_icon" src="../../static/wallet/wx.png"></image>
						<view class="text_pay">微信支付</view>
					</view>
					<image v-if="pay_type==2" class="sel_pay" src="../../static/wallet/yes.png"></image>
					<view class="pay_null" v-else @click="pay_type=2"></view>
					
				</view>
				<view class="pay_item">
					<view style="display: flex;width: 60%;">
						<image class="pay_icon" src="../../static/wallet/mm.png"></image>
						<view class="text_pay">余额支付</view>
					</view>
					<image v-if="pay_type==3" class="sel_pay" src="../../static/wallet/yes.png"></image>
					<view class="pay_null" v-else @click="pay_type=3"></view>
				</view>
				<view class="pay_pop_btn" @click="orderPay()">确定</view>
			</view>
		</u-popup>
		<u-popup :show="kefu_show" mode="center" :round="12" closeOnClickOverlay @close="show=false">
			<view class="kefu_box">
				<view class="kefu_title">客服电话</view>
				<view class="kefu_phone">{{kefu_phone}}</view>
				<view class="kefu_phone" style="font-size: 24rpx;">在线时间:{{kefu_time}}</view>
				<view class="kefu_btn" @click="contact()">联系客服</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {orderDetail,cancelOrder,addPrice,keFu} from "../../api/index.js"
	export default {
		data() {
			return {
				add_show:false,
				list:[],
				id:'',
				add_price:'',
				pay_show:false,
				pay_type:3,
				sb:'',
				kefu_show:false,
				kefu_phone:'',
				kefu_time:''
			}
		},
		onLoad(e) {
			this.id=e.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			copyPhone(e){
				uni.setClipboardData({
					data:e,
				});
			},
			copyOrder(e){
				uni.setClipboardData({
					data:e,
				});
			},
			orderPay(){
				let p={
					order_id:this.id,
					money:this.add_price,
					type:this.pay_type,
					method:'app',
				}
				addPrice(p).then(res=>{
					console.log(res);
					uni.showToast({
						icon:'success',
						title:'加价成功'
					})
					this.pay_show=false
					this.add_show=false
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/order/order"
						})
					},800)
				})
			},
			cancel(e){
				cancelOrder({id:this.id}).then(res=>{
					uni.showToast({
						icon:'success',
						title:'订单删除成功'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/order/order"
						})
					},800)
				})
			},
			
			toMaster(e){
				uni.navigateTo({
					url:'/pages/order/master?id='+e
				})
			},
			getDetail(){
				orderDetail(this.id).then(result=>{
					console.log(result,455445654546456546456465);
					this.list=result.data
				})
			},
			openKeFu(){
				this.kefu_show=true
				keFu().then(res=>{
					this.kefu_phone=res.data.phone
					this.kefu_time=res.data.wokrtime
				})
			},
			contact(){
				uni.makePhoneCall({
					phoneNumber:this.kefu_phone,
				})
				this.kefu_show=false
			},
			toOverImg(e){
				console.log(e);
				uni.navigateTo({
					url:"/pages/order/over?id="+e
				})
			},
			toAssess(e){
				uni.navigateTo({
					url:'/pages/order/assess?id='+e
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.kefu_box{
		width: 558rpx;
		height: 280rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		padding: 32rpx;
		text-align: center;
		.kefu_title{
			width: 100%;
			text-align: center;
			font-weight: bold;
		}
		.kefu_phone{
			color: #666666;
			margin-top: 20rpx;
		}
		.kefu_btn{
			color: #00CC7B;
			margin-top: 32rpx;
		}
	}
	.orderdetail_page {
		width: 100%;
		height: auto;
		// max-height: 100vh;
		background-color: #F9F9F9;
		padding-bottom: 32rpx;
		.order_type_box {
			width: 100%;
			height: 108rpx;
			padding: 32rpx;
			background-color: #F9F9F9;

			.order_type {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.pay_tip {
				font-size: 24rpx;
				color: #666666;
				margin-top: 16rpx;
			}
		}

		.card {
			width: 100%;
			height: 104rpx;
			padding: 32rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;

			.card_text {
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.order_info_box {
			width: 100%;
			height: 372rpx;
			background-color: #FFFFFF;
			padding: 32rpx;
			margin-top: 20rpx;

			.info_type {
				color: #00CC7B;
				font-size: 32rpx;
				font-weight: bold;
			}

			.custom_info {
				width: 100%;
				height: 40rpx;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				margin-top: 64rpx;
			}

			.info_item {
				font-size: 24rpx;
				color: #333333;
				margin-top: 24rpx;
				display: flex;
				position: relative;

				.info_text {
					margin-left: 56rpx;
				}

				.copy {
					position: absolute;
					right: 0rpx;
					width: 72rpx;
					height: 40rpx;
					border-radius: 8rpx;
					border: 2rpx #FAFAFA solid;
					text-align: center;
					line-height: 40rpx;
					font-size: 20rpx;
				}
			}
		}

		.order_box {
			width: 100%;
			height: 400rpx;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			padding: 32rpx;

			.content {
				width: 100%;
				height: 160rpx;
				display: flex;
				margin-top: 34rpx;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
				}

				.right {
					width: 500rpx;
					height: 160rpx;
					margin-left: 32rpx;

					.tips {
						color: #666666;
						font-size: 28rpx;
						margin-top: 24rpx;
					}

					.goods_name {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}
				}
			}

			.total_money {
				width: 100%;
				height: 40rpx;
				color: #333333;
				font-size: 24rpx;
				text-align: right;
				margin-top: 66rpx;
			}
		}

		.order_no_box {
			width: 100%;
			height: 312rpx;
			background-color: #FFFFFF;
			padding: 32rpx;
			margin-top: 20rpx;

			.no_text {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.info_item {
				font-size: 24rpx;
				color: #666666;
				margin-top: 24rpx;
				display: flex;
				position: relative;

				.info_text {
					margin-left: 56rpx;
				}

				.copy {
					position: absolute;
					right: 0rpx;
					width: 72rpx;
					height: 40rpx;
					border-radius: 8rpx;
					border: 2rpx #FAFAFA solid;
					text-align: center;
					line-height: 40rpx;
					font-size: 20rpx;
				}
			}

			.kefu_box {
				width: 100%;
				height: 104rpx;
				padding: 28rpx;
				background-color: #FFFFFF;
				margin-top: 32rpx;
				border-top: 2rpx #FAFAFA solid;
				display: flex;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-left: 228rpx;
					margin-right: 16rpx;
				}

				view {
					color: #000000;
					font-size: 28rpx;
					font-weight: bold;
					line-height: 48rpx;
				}
			}
		}

		.btns {
			width: 100%;
			height: 88rpx;
			margin-top: 48rpx;
			text-align: right;
			padding: 16rpx 32rpx;
			background-color: #FFFFFF;
			display: flex;
			padding-left: 206rpx;
			justify-content: end;

			.btn {
				width: 160rpx;
				height: 56rpx;
				line-height: 48rpx;
				border-radius: 32rpx;
				color: #333333;
				text-align: center;
				font-size: 24rpx;
				border: 2rpx #DDDDDD solid;
				margin-right: 16rpx;
			}

			.pay_btn {
				width: 160rpx;
				height: 56rpx;
				line-height: 48rpx;
				border-radius: 32rpx;
				color: #00CC7B;
				text-align: center;
				font-size: 24rpx;
				border: 2rpx #00CC7B solid;
			}
		}

	}
.pop_box{
	width: 100%;
	height: 480rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 32rpx;
	text-align: center;
	.pop_ipt{
		width: 100%;
		height: 80rpx;
		border: none;
		background-color: #EEEEEE;
		border-radius: 8rpx;
		padding-left: 32rpx;
		margin-top: 110rpx;
		text-align: left;
		
	}
	.pop_btn{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #00CC7B;
		color: #FFFFFF;
		border-radius: 128rpx;
		margin-top: 80rpx;
	}
	
}
.pay_pop{
		width: 100%;
		height: 634rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #FFFFFF;
		padding: 32rpx;
		text-align: center;
		.pay_num{
			margin-top: 60rpx;
			color: #FA5A28;
			font-weight: bold;
			margin-bottom: 48rpx;
		}
		.pay_item{
			width: 100%;
			height: 48rpx;
			display: flex;
			margin-top: 32rpx;
			justify-content: space-between;
			.pay_icon{
				width: 48rpx;
				height: 48rpx;
				margin-right: 32rpx;
			}
			.text_pay{
				width: 60%;
				text-align: left;
				height: 48rpx;
				line-height: 48rpx;
				color: #666666;
				font-size: 28rpx;
			}
			.pay_null{
				width: 48rpx;
				height: 48rpx;
				border: 2rpx #999999 solid;
				border-radius: 100%;
			}
			.sel_pay{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.pay_pop_btn{
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 128rpx;
			background-color: #00CC7B;
			color: #FFFFFF;
			margin-top: 140rpx;
		}
	}
</style>